<template>
  <div class="todolistBox">
    <!-- 头部 -->
    <div class="header-box">
      <div class="header-left">
        <div class="add">+</div>
        <h2>Todo List</h2>
      </div>
      <div class="header-right">
        <!-- 头部全选 -->
        <button
          class="selectAll"
          @click="handleSelectAll"
          :style="isSelectedAll ? 'background:#A49DE9' : 'background:#DA3131'"
          :class="isContentFull ? 'isContentFull' : ''"
          :disabled="isContentFull"
        >
          全选
        </button>
        <!-- 头部添加 -->
        <button class="rightAdd" @click="handleAdd">添加</button>
      </div>
    </div>

    <!-- 内容部分 -->
    <div class="content">
      <div
        class="content-item"
        v-for="(item, index) in todoList"
        :key="item.id"
      >
        <!-- 选中 checkbox -->
        <div
          class="content-left-select"
          @click="handleSelected(index, item.id)"
        >
          <span :style="item.isSelected ? 'opacity:1' : 'opacity:0'"></span>
        </div>
        <!-- input 输入框 -->
        <input
          type="text"
          class="content-input"
          v-model="item.text"
          :disabled="item.isSelected"
          :class="item.isSelected ? 'line-through' : ''"
          @keyup.enter="inputComplete(index)"
          ref="input"
        /><!-- :disabled 当item处于选中状态时，不允许编辑
               :class 动态样式 当item 选中，给文字加横线变浅
         -->

        <!-- 右侧时间 和 按钮 -->
        <div class="content-right">
          <p>{{ item.time }}</p>
          <button @click="DelItem(index, item.id)">删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";

export default {
  name: "App",
  components: {},
  data() {
    return {
      todoList: [],
      isSelectedAll: false,
      inputLength: 0,
    };
  },
  created() {
    let getList = JSON.parse(window.localStorage.getItem("todoList"));
    if (getList === null) {
      this.todoList = [
        {
          id: this.randomId(),
          text: "点击添加按钮添加事件",
          isSelected: false,
          // npm install dayjs
          time: dayjs(new Date()).format("YY-MM-DD HH:mm"),
        },
      ];
    } else {
      this.todoList = getList;
    }
  },
  methods: {
    // 头部添加按钮
    handleAdd() {
      // console.log("?");
      this.todoList.unshift({
        id: this.randomId(),
        text: "",
        isSelected: false,
        // npm install dayjs
        time: dayjs(new Date()).format("YY-MM-DD HH:mm"),
      });
      // 本地存储
      this.storage();

      // 新添加事件时 下标自动锁定在第一个item
      // 这里用ref获取input的length作索引
      // setTimeout(() => {
      this.inputLength = this.$refs.input.length;
      // });
      // 使用$nextTick 获取更新后的dom， 不然获取不到
      this.$nextTick(() => {
        this.$refs.input[this.inputLength].focus();
      });
    },
    // 删除功能
    DelItem(index, id) {
      // console.log(index);
      if (this.todoList[index].id === id) {
        this.todoList.splice(index, 1);
      }
      this.storage();
    },
    // 选中功能
    handleSelected(index, id) {
      // console.log(index + "-" + id);
      if (this.todoList[index].id === id && this.todoList[index].text) {
        this.todoList[index].isSelected = !this.todoList[index].isSelected;
      } else {
        alert("请输入内容");
      }
      this.storage();
    },
    //全选功能
    handleSelectAll() {
      // console.log("?");
      this.isSelectedAll = !this.isSelectedAll;
      // 先判断有没有未选中的按钮
      let isSelectedBtn = this.todoList.find((item) => !item.isSelected);
      // 如果有未选中的按钮， 则全部选中
      // 如果没有未选中的按钮，则全部清空，按钮改回false
      if (isSelectedBtn) {
        this.todoList.forEach((item) => {
          item.isSelected = true;
        });
      } else {
        this.todoList.forEach((item) => {
          item.isSelected = false;
        });
      }
      this.storage();
      // v1 代码 有bug
      // this.todoList.forEach((item) => {
      //   item.isSelected = !item.isSelected;
      // });
    },

    // 键盘按下 enter 时打勾完成
    inputComplete(index) {
      // console.log("?");
      this.todoList[index].isSelected = true;
      // 若input 里没有内容则弹窗
      if (!this.todoList[index].text) {
        alert("请输入内容");
        this.todoList[index].isSelected = false;
      }
      this.storage();
    },
    // 生成随机 ID 范围到1000
    randomId() {
      return Math.ceil(Math.random() * 1000);
    },
    // 本地存储
    storage() {
      window.localStorage.setItem("todoList", JSON.stringify(this.todoList));
    },
  },
  computed: {
    // 判断input是否有空内容
    isContentFull() {
      for (let item of this.todoList) {
        if (!item.text) {
          return true;
        }
      }
      return false;
    },
  },
};
</script>

<style>
button {
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
}
.todolistBox {
  position: absolute;
  width: 800px;
  height: 600px;
  border-radius: 10px;
  background-color: pink;
  background-color: #3c3f51;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  color: white;
}
.header-box {
  border-bottom: 1px solid #000;
}
.todolistBox .header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-left {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-left .add {
  width: 45px;
  height: 45px;
  margin-right: 15px;
  border-radius: 50%;
  font-size: 30px;
  text-align: center;
  background-color: #938ae9;
}
.header-right {
  padding: 5px 10px;
}
.header-right .selectAll {
  background-color: #c11929;
  transition: all 0.5s;
}
.header-right .rightAdd {
  margin-left: 8px;
  background-color: #54c35e;
}

/* 内容部分 */
.content {
  margin-top: 30px;
  height: 450px;
  overflow-y: scroll;
}
/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 1px;
}
.content-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #6c7180;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 8px;
  color: white;
}
.content-left-select {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
}
.content-left-select span {
  position: absolute;
  width: 15px;
  height: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #a49de9;
  transition: all 0.5s;
}
.content-input {
  position: relative;
  flex: 1;
  border: none;
  padding: 5px 10px;
  margin: 20px;
  color: white;
  outline: none;
  font-size: 16px;
  background-color: transparent;
  border-bottom: 1px solid #ccc;
  transition: all 0.5s;
}
.content-right {
  display: flex;
  align-items: center;
}
.content-right button {
  padding: 5px 10px;
  margin-left: 20px;
  background: #da3131;
}

/* item选中时的动态样式 */
.line-through {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through rgba(255, 255, 255, 0.8);
}
.isContentFull {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through rgba(255, 255, 255, 0.8);
  background-color: pink !important;
}
</style>
